<template>
  <div class="order-box">
    <el-row class="order-header">
      <el-col><h3>您好！欢迎&nbsp;{{name}}&nbsp;来到绿竹鞋庄</h3></el-col>
    </el-row>
    <el-divider></el-divider>
    <el-row class="order-body">
      <el-col><h2>订单中心</h2></el-col>
    </el-row>
    <el-row class="order-content">
      <el-table :data="orderlist">
        <el-table-column label="商品编号" prop="shoes_id" align="center"></el-table-column>
        <el-table-column label="图片" align="center">
          <template slot-scope="scope">
            <img :src="scope.row.shoes_img" class="orderlist-img"/>
          </template>
        </el-table-column>
        <el-table-column label="商品名称" prop="shoes_name"></el-table-column>
        <el-table-column label="收货人" prop="name"></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="selectOrderinfo(scope.row.order_id)">查看订单详情</el-button>
            <el-button type="text" @click="deletedOrder(scope.row.order_id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-dialog title="订单详情" :visible.sync="isShow" width="40%">
    <el-row type="flex" justify="start" class="goods-message">
      <el-col :span="12" class="goods-img">
        <img :src="orderInfo.shoes_img" class="img">
      </el-col>
      <el-col :offset="2" :span="10" class="good-memo">
        <h2>商品详情</h2>
        <p>商品名称：{{orderInfo.shoes_name}}</p>
        <p>商品介绍：{{orderInfo.memo}}</p>
        <p>商品价格：{{orderInfo.price}}</p>
        <p>种类：{{category[orderInfo.category_id]}}</p>
      </el-col>
    </el-row>
    <el-row type="flex" justify="start" class="user-message">
      <el-col :span="16" class="address-message">
        <h2>收货信息</h2>
        <p>收货人：{{orderInfo.user_name}}</p>
        <p>手机号码：{{orderInfo.address_phone}}</p>
        <p>所属地区：{{orderInfo.address_name}}</p>
        <p>详细地址：{{orderInfo.detailed_address}}</p>
      </el-col>
      <el-col :span="8" class="buy-message">
        <h2>购买信息</h2>
        <p>购买数量：{{orderInfo.shoes_num}}</p>
        <p>小计：{{orderInfo.shoes_num*orderInfo.price}}</p>
        <p>审核状态：{{orderInfo.state == 0? '未通过':'已通过'}}</p>
      </el-col>
    </el-row>
    <center><el-button type="primary" @click="isShow=false">确认</el-button></center>
    </el-dialog>
  </div>
</template>
<script>
import http from '@/utils/HttpUtil'
export default {
  data () {
    return {
      isShow: false,
      action: {
        selectOrderById: 'shoes_Web_exploded/Order/selectOrderById',
        selectOrderInfoById: 'shoes_Web_exploded/Order/selectOrderInfoById',
        deletedOrder: 'shoes_Web_exploded/Order/deletedOrder'
      },
      name: '迎刃而上',
      userId: '',
      orderlist: [],
      orderInfo: {
        address_name: '',
        address_phone: '',
        category_id: '',
        detailed_address: '',
        memo: '',
        price: 0,
        shoes_id: '',
        shoes_img: '',
        shoes_name: '',
        shoes_num: 0,
        user_name: '',
        state: 0
      },
      category: ['休闲鞋', '跑鞋', '篮球鞋']
    }
  },
  components: {

  },
  computed: {

  },
  methods: {
    getuserId () {
      this.userId = sessionStorage.getItem('user_id')
    },
    getOrder (curr_page = 1, page_size = 10) {
      const params = {
        'curr_page': curr_page,
        'page_size': page_size
      }
      http.xhrPost(this, this.action.selectOrderById + '/' + this.userId, params, (res) => {
        this.orderlist = res.data
      })
    },
    selectOrderinfo (orderId) {
      this.isShow = true
      http.xhrPost(this, this.action.selectOrderInfoById + '/' + orderId, null, (res) => {
        this.orderInfo = res.data
      })
    },
    deletedOrder (orderId) {
      this.$confirm('您正在执行批量删除操作', '提示', {
        confirmButtonText: '残忍丢弃',
        cancelButtonText: '容我想想',
        type: 'warning'
      }).then(() => {
        http.xhrPost(this, this.action.deletedOrder + '/' + orderId, null, (res) => {
          this.$message({
            type: 'success',
            message: res.message
          })
          this.getOrder()
        })
      })
    }
  },
  mounted () {
    this.getuserId()
    this.getOrder()
  }
}
</script>

<style lang="scss">
  @import '../../assets/style/common.scss';
  .order-box {
    .order-header {
      h3 {
      color: #C40000;
      line-height: 30px;
      font-size: 14px;
      font-weight: normal;
      }
    }
    .order-body {
      text-align: center;
      margin-bottom: 20px;
      h2 {
        font-size: 24px;
        font-weight: bold;
        color: #727272;
      }
    }
    .goods-message {
      margin-bottom: 30px;
      line-height: 35px;
      .goods-img {
        img{
          height: 250px;
          width: 250px;
        }
      }
      .good-memo {
        h2 {
          color: $red;
          font-size: 26px;
        }
        p{
          font-size: 16px;
        }
      }
    }
    .user-message {
      margin-bottom: 20px;
      line-height: 40px;
      .address-message {
        h2{
          font-size:20px;
          color: $red;
        }
        p {
          margin-left: 20px;
          font-size: 14px;
        }
      }
      .buy-message {
        h2{
          font-size:20px;
          color: $red;
        }
        p {
          margin-left: 20px;
          font-size: 14px;
        }
      }
    }
    .order-content {
      .orderlist-img {
        height: 150px;
        width: 150px;
      }
    }
  }
</style>
